<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>价格走势</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <link rel="stylesheet" href="../plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../common/css/footer.css">
    <link rel="stylesheet" href="../common/css/nav.css">
    <link rel="stylesheet" href="../css/searchmap.css">
    <link rel="stylesheet" href="../css/roomatedesc.css">
    <script src="../js/iconfont.js"></script>
    <!--    <link href="../plugins/H+/css/style.css?v=4.1.0" rel="stylesheet">-->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .zhezhao{
            position: fixed;
            left: 0px;
            top: 0px;
            background: #000;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }
        .zhezhao2{
            position: fixed;
            left: 0px;
            top: 0px;
            background: #000;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }
        .zhezhao3{
            position: fixed;
            left: 0px;
            top: 0px;
            background: #000;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }
        .pop-up{
            position: relative;
            padding: 40px;
            background: #fff;
            width: 25%;
            height: 55%;
            border-radius: 5px;
            margin: 5% auto;

        }
        #header-right{
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 5px;
            background: red;
            color: #fff;
            right: 5px;
            top: 5px;
            text-align: center;
        }
        #header-right2{
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 5px;
            background: red;
            color: #fff;
            right: 5px;
            top: 5px;
            text-align: center;
        }
        #header-right3{
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 5px;
            background: red;
            color: #fff;
            right: 5px;
            top: 5px;
            text-align: center;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
</head>
<style>
    .img-size{
        width: 90px;
        height: 85px;
    }
    .size-search{
        width: 100%;
        height: 550px;
    }
    #container2 {
        /*width: 600px;*/
        height: 350px;
    }
    .card-header2{
        padding: .75rem 1.25rem;
        margin-bottom: 0;
        /*background-color: rgba(0,0,0,.03);*/
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
</style>
<body class="overflow-auto">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light " id="nav">

    <div class="collapse navbar-collapse col-md-10 offset-md-1 animate__animated  animate__zoomIn"
      id="navbarSupportedContent">
      <a id="logo-img" class="navbar-brand" href="../view/index.html">
        <img alt="Brand" src="../common/imgs/logo_small.png">
      </a>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a id="select-city"  style="font-size: 12px;" class="nav-link" href="selectcity.html"><svg id="city-icon" class="bi bi-building" width="1em"
                  height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd"
                      d="M15.285.089A.5.5 0 0 1 15.5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5H1a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .418-.493l5.582-.93V3.5a.5.5 0 0 1 .324-.468l8-3a.5.5 0 0 1 .46.057zM7.5 3.846V8.5a.5.5 0 0 1-.418.493l-5.582.93V15h8v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.222l-7 2.624z" />
                  <path fill-rule="evenodd" d="M6.5 15.5v-7h1v7h-1z" />
                  <path
                      d="M2.5 11h1v1h-1v-1zm2 0h1v1h-1v-1zm-2 2h1v1h-1v-1zm2 0h1v1h-1v-1zm6-10h1v1h-1V3zm2 0h1v1h-1V3zm-4 2h1v1h-1V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm-2 2h1v1h-1V7zm2 0h1v1h-1V7zm-4 0h1v1h-1V7zm0 2h1v1h-1V9zm2 0h1v1h-1V9zm2 0h1v1h-1V9zm-4 2h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1z" />
              </svg><span id="cityname">选择城市<span></a>
      </li>
      </ul>
      <ul class="navbar-nav mr-5 ">
        <li class="nav-item">
          <a class="nav-link" href="../view/searchhouse.html">租房</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../view/issuehouse.html">发布房源</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../view/roomate.html">寻找室友</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../view/PriceTrendChart.html">房价走势</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            指南
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="Agreement.html">用户协议</a>
            <a class="dropdown-item" href="Potplayer.html">隐私政策</a>
            <a class="dropdown-item" href="Commitment.html">服务承诺</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="about.html">关于我们</a>
          </div>
        </li>
      </ul>
      <a href="login_register.html" id="login-button" class="btn btn-outline-success active animate__animated animate__pulse"
        role="button" aria-pressed="true">登录/注册</a>
      <!-- <a href="register.html" id="register-button"
        class="btn btn-outline-success active animate__animated animate__pulse" role="button" aria-pressed="true">注册</a> -->
    </div>
  </nav>
<!--布局-->
<div id="container10">
    <div>
        <div class="container">

            <div class="row">
                <div class="col-8 " style="margin-top: 15px" >
                    <!--            左边巨幕-->
                    <div class="jumbotron bg-success" >
                        <h1 class="display-4 font-weight-bold text-light" style="margin-bottom: 90px">苏州!</h1>
                        <hr class="my-4">
                        <div class="container">
                            <div class="row" style="margin-bottom: -60px">
                                <div class="col" >
                                    <p class="text-light">六月参考均价</p>
                                    <span class="display-4 font-weight-bold text-light" >2200</span>
                                    <span class="text-light">元/月</span>
                                </div>
                                <div class="col">
                                    <p class="text-light">房源统计</p>
                                    <p class="text-light">在租房源14123套</p>
                                    <p class="text-light">最近90天内出租房源2313套</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--            房价走势-->
                    <div id="equip2" class="card" style="margin-top: 15px">
                        <div class="card-header2"><h5>近期房价走势</h5></div>
                        <div class="card-body">
                            <div class="container3">
                                单位：百元
                            </div>
                            <div style="width:100%;margin:0 auto">
                                <div id="charts1"></div>
                            </div>
                        </div>
                    </div>

                    <!--                地图-->
                    <div id="equip" class="card" style="margin-top: 15px">
                        <div class="card-header2 "><h5>地图</h5></div>
                        <div id="map" class=" mb-12 house-desc-card animate__animated animate__flipInX" style="max-width: 50rem;">
                            <div id="map-box" class="card-body text-dark">
                                <div id="container2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--            右边搜索栏-->
                <div class="col-4">
                    <div class="input-group mb-3" style="margin-top: 15px">
                        <input type="text" class="form-control" placeholder="输入查询的房源名称" aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon2">
                                <svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                                    <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <!--                    搜索显示的房源-->
                    <div class="container overflow-auto size-search">
                        <div class="row">
                            <div class="col-4">
                                <img class="img-size" src="../imgs/house.png">
                            </div>
                            <div class="col-8" style="margin-top: 20px">
                                <span>三室一厅 | 合租 </span><br>
                                <span>工业园区 斜塘路</span>
                                <div style="float: right; color: red;"><strong>900元/月</strong></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 15px">
                            <div class="col-4">
                                <img class="img-size" src="../imgs/house.png">
                            </div>
                            <div class="col-8" style="margin-top: 20px">
                                <span>三室一厅 | 合租 </span><br>
                                <span>工业园区 斜塘路</span>
                                <div style="float: right; color: red;"><strong>900元/月</strong></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 15px">
                            <div class="col-4">
                                <img class="img-size" src="../imgs/house.png">
                            </div>
                            <div class="col-8" style="margin-top: 20px">
                                <span>三室一厅 | 合租 </span><br>
                                <span>工业园区 斜塘路</span>
                                <div style="float: right; color: red;"><strong>900元/月</strong></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 15px">
                            <div class="col-4">
                                <img class="img-size" src="../imgs/house.png">
                            </div>
                            <div class="col-8" style="margin-top: 20px">
                                <span>三室一厅 | 合租 </span><br>
                                <span>工业园区 斜塘路</span>
                                <div style="float: right; color: red;"><strong>900元/月</strong></div>
                            </div>
                        </div><div class="row" style="margin-top: 15px">
                        <div class="col-4">
                            <img class="img-size" src="../imgs/house.png">
                        </div>
                        <div class="col-8" style="margin-top: 20px">
                            <span>三室一厅 | 合租 </span><br>
                            <span>工业园区 斜塘路</span>
                            <div style="float: right; color: red;"><strong>900元/月</strong></div>
                        </div>
                    </div>
                        <div class="row" style="margin-top: 15px;margin-bottom: 15px">
                            <div class="col-4">
                                <img class="img-size" src="../imgs/house.png">
                            </div>
                            <div class="col-8" style="margin-top: 20px">
                                <span>三室一厅 | 合租 </span><br>
                                <span>工业园区 斜塘路</span>
                                <div style="float: right; color: red;"><strong>900元/月</strong></div>
                            </div>
                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>

    <!--底部-->
    <div class="footer">
        <div class="wrapper">
            <!-- 3-1 第一列 -->
            <div class="title">
                <div class="fl">
                    <ul class="nav nav-tabs">
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">练习我们</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">隐私声明</a></li>
                        <li><a href="#">网站地址</a></li>
                        <li><a href="#">友情链接</a></li>
                    </ul>
                </div>
                <div class="fr">
                    客服电话 ：0101 0101
                </div>
            </div>

            <!-- 3-2 第二列 -->
            <div class="middle-box">
                <div class="mid-up">
                    <div class="tele-logo"></div>
                    <div class="tele-word">
                        留言给Airent:
                    </div>
                    <div class="tele-num">
                        12123321@123.com
                    </div>
                </div>
                <div class="mid-down">
                    <div class="dizhi">
                        地理位置<br>
                        苏州市工业园区新平街388号腾飞创新园14号楼<br>
                        邮编：215000
                    </div>
                </div>
            </div>

            <!-- 3-3 第三列 -->
            <div class="bottom">
                <div class="copyright">
                    airen有限公司 | 2020airent网版权所有 | 营业执照<br>
                    违法举报电话 ：0101 0101 违法和不良信息举报邮箱 ：384905931@qq.com
                </div>
                <div class="copybottom">
                    网上有害信息举报专区
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // document.getElementById('zhezhao').style.display="none";
    // function click1(){
    //     document.getElementById('zhezhao').style.display="";
    //     // document.getElementById('container10').style.display="none";
    // }
    // function hidder(){
    //     document.getElementById('zhezhao').style.display="none";
    //     // document.getElementById('container10').style.display="";
    // }

    // document.getElementById('zhezhao2').style.display="none";
    // function click2(){
    //     document.getElementById('zhezhao2').style.display="";
    // }
    // function hidder2(){
    //     document.getElementById('zhezhao2').style.display="none";
    // }

    // function click3() {
    //     document.getElementById('zhezhao').style.display="";
    //     document.getElementById('zhezhao2').style.display="none";
    // }
    // function click4() {
    //     document.getElementById('zhezhao2').style.display="";
    //     document.getElementById('zhezhao').style.display="none";
    // }
    // document.getElementById('zhezhao3').style.display="none";
    // function hidder3(){
    //     document.getElementById('zhezhao3').style.display="none";
    // }
    // function click5() {
    //     document.getElementById('zhezhao3').style.display="";
    //     document.getElementById('zhezhao').style.display="none";
    // }


</script>
<script>
    Apex = {
        chart: {
            height: 160,
            toolbar:{
                show:false//启用数据标签，即是否直接在图标上显示数据
            }
        },
        dataLabels: {
            enabled: false
        },
        toolbar: {
            tools: {
                selection: true//工具条
            }
        },
        tooltip: {//鼠标移动上去显示的提示框
            followCursor: false,
            theme: 'light',
            x: {
                show: true
            },
            marker: {
                show: true
            },
            y: {
                show:true,
            }
        },
        stroke: {//画的曲线
            curve: 'smooth',
        },
        grid: {
            clipMarkers: true
        },
        yaxis: {

            tickAmount: 2//y轴分几等份
        },
        xaxis: {

            type: 'datetime'//设置X轴的类型 三种可选：category、datetime、numeric
        },
    }
    function generateDayWiseTimeSeries(baseval, count, yrange) {
        var i = 0;
        var series = [];
        while (i < count) {
            var x = baseval;
            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

            series.push([x, y]);
            baseval += 86400000;
            i++;
        }
        return series;
    }

    var options = {
        /*
          series数据格式；
          series:[{name,data:[]}],
        */
        series: [{
            name:"价格",
            data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                min: 10,
                max: 60
            })
        },
        ],
        chart: {
            id:"a",// 创建图表组时，应该为每个图表添加一个id
            group: 'social', // 如果想要创建一个图表组来同时执行交互操作，那么这些图表应该属于同一个组，就需要在这里的group中填写所属分组
            type: 'line',//图表类型，bar为柱状图
            height: 200
        },
        colors: ['#008FaB',"#abcdef","#124567"],
        yaxis: {
            labels: {
                minWidth: 40
            }
        },
        xaxis: {
            type: 'datetime'//设置X轴的类型 三种可选：category、datetime、numeric
        },
    };
    var chart = new ApexCharts(document.querySelector("#charts1"), options);
    chart.render();
</script>
<script type="text/javascript">
    // // 百度地图API功能
    // var map = new BMap.Map("con");    // 创建Map实例
    // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    // //添加地图类型控件
    // map.addControl(new BMap.MapTypeControl({
    //     mapTypes: [
    //         BMAP_NORMAL_MAP,
    //         BMAP_HYBRID_MAP
    //     ]
    // }));
    // // map.setCurrentCity(cityName);          // 设置地图显示的城市 此项是必须设置的
    // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


    var map = new BMap.Map("container2");
    // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }); //右上角，仅包含平移和缩放按钮
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    map.addControl(top_right_navigation);
    map.enableScrollWheelZoom();
    window.onload=function locationcity() {
        function myFun(result) {
            var cityName = result.name;
            var outer = document.getElementById("cityname");
            map.setCenter(cityName);
            outer.innerText = cityName;
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
    }
    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
        '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
        '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
        '</div>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
        title: "百度大厦",      //标题
        width: 290,             //宽度
        height: 105,              //高度
        panel: "panel",         //检索结果面板
        enableAutoPan: true,     //自动平移
        searchTypes: [
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    });
    var marker = new BMap.Marker(point); //创建marker对象

    marker.addEventListener("click", function (e) {
        searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker


    
</script>

</html>